<html>
<title>Yosemite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<style type="text/css">
body
{
	background-image:url("img/background.jpg");
	background-position:center;
	background-size:cover;	
    background-attachment:fixed;
    overflow:hidden;
    font-family:等线,微软雅黑;
}
.topbar
{
	background-color:rgba(255,255,255,0.7);
	width:110%;
	height:26px;
	position:fixed;
	right:-10%;
	top:0px;
	box-shadow:-30px 3px 50px rgba(0,0,0,0.5);
	z-index:999999;
}
.bar_icon
{
	height:18px;
	position:absolute;
	top:4px;
	font-size:15px;
	line-height:18px;
	text-align:center;
	color:#000;
    font-family:等线,微软雅黑;
	cursor:pointer;
}
.dock_box
{
	position:absolute;
	bottom:2px;
	left:50%;
	transform:translate(-50%,0px);
	display:flex;
    justify-content:center;
    height:80px;
    border-radius:10px;
    padding-left:10px;
    padding-right:10px;
    align-items:flex-end;
}
.dock_blur
{
	position:absolute;
	width:150%;
	height:200px;
	left:-25%;
	top:-50px;
    background-image:url("img/background.jpg");
    background-position:center;
    background-attachment:fixed;
    background-size:cover;
    filter:blur(20px);
}
.dock_brit
{
	position:absolute;
	width:100%;
	height:80px;
	left:0px;
	top:0px;
	background-color:#fff;
	opacity:0.25;
}
.frame
{
	border-radius:5px;
	overflow:hidden;
	position:absolute;
	box-shadow:20px 20px 100px rgba(0,0,0,0.8);
    transition:width 0.3s,height 0.3s;
}
.window
{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:50px;
	background-color:rgba(246,246,246,0.9);
	border-bottom:solid 1px #dadada;
	box-sizing:border-box;
}
.body
{
	width:100%;
	height:700px;
	position:absolute;
	top:50px;
	left:0px;
	background-color:#fff;
}
.buttom
{
	height:15px;
	width:15px;
	top:17.5px;
	border-radius:50%;
	position:absolute;
	cursor:pointer;
}
.url
{
	width:600px;
	height:30px;
	border:solid 1px #dadada;
	outline:none;
	position:absolute;
	left:50%;
	top:10px;
	transform:translate(-50%,0px);
	text-align:center;
	line-height:35px;
	border-radius:5px;
	background-color:#f6f6f6;
	font-size:15px;
}
.url:hover
{
	background-color:#fff;
	text-decoration:none;
}
.main
{
	position:absolute;
	left:0px;
	top:0px;
}
.icon
{
	width:70px;
	height:70px;
	z-index:9;
	cursor:pointer;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:2px;
    margin-right:2px;
	transition:all 0.3s;
}
.load
{
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-color:#000;
	z-index:99999999;
}
.login
{
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:99999998;
	transition:all 0.7s;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script>if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};</script>
<script type="text/javascript">
	window.onload=function()
	{
		setInterval(function(){
			var time=new Date();
			var Mo=time.getMonth();
			var D=time.getDate();
			var X=time.getDay();
			if (X==0)
			{
				var XQ="周天";
			}
			else if (X==1)
			{
				var XQ="周一";
			}
			else if (X==2)
			{
				var XQ="周二";
			}
			else if (X==3)
			{
				var XQ="周三";
			}
			else if (X==4)
			{
				var XQ="周四";
			}
			else if (X==5)
			{
				var XQ="周五";
			}
			else if (X==6)
			{
				var XQ="周六";
			}
			var H=time.getHours();
			var Mi=time.getMinutes();
			var S=time.getSeconds();
			if (H<10)
			{H="0"+H}
			if (Mi<10)
			{Mi="0"+Mi}
			if (S<10)
			{S="0"+S}
			document.getElementById("time").innerHTML=Mo+"月"+D+"日&nbsp&nbsp&nbsp"+XQ+"&nbsp&nbsp&nbsp"+H+" "+Mi+" "+S;
		},1000)
		document.getElementById("loads").style.left="0px";
		setTimeout(function(){
			$("#load").hide();
		},5000);
	}

	var dx=0;
	var dy=0;
	var drag_per=0;
	function drag_begin(e)
	{
		var x=parseInt(document.getElementById("safari").style.left);
		var y=parseInt(document.getElementById("safari").style.top);
		e= e || window.event;
		var m_x=e.pageX;
     	var m_y=e.pageY;
     	dx=x-m_x;
     	dy=y-m_y;
     	drag_per=1;
	}

	function drag_end(e)
	{
		if (drag_per==1)
		{
			e2= e || window.event;
			var m_x2=e2.pageX;
	     	var m_y2=e2.pageY;
	     	var a=m_x2+dx;
	     	var b=m_y2+dy;
	     	document.getElementById("safari").style.left=a+"px";
	     	document.getElementById("safari").style.top=b+"px";
    	}
	}

	var icos=7;
	function paopao(x)
	{
		var scale_list=[75,85,110,85,75];
		var list=[];
		var list2=[];
		if (x<3)
		{
			for (var i=1;i<=(x+2);i++)
			{
				list.splice(list.length,0,i);
				list2.splice(list2.length,0,scale_list[2-x+i]);
			}
		}
		else if (x>icos-3)
		{
			for (var j=x-2;j<=icos;j++)
			{
				list.splice(list.length,0,j);
				list2.splice(list2.length,0,scale_list[2-x+j]);
			}
		}
		else
		{
			for (var a=x-2;a<=x+2;a++)
			{
				list.splice(list.length,0,a);
				list2.splice(list2.length,0,scale_list[2-x+a]);
			}
		}
		for (var k=0;k<list.length;k++)
		{
			document.getElementById("ico"+list[k]).style.width=list2[k]+"px";
			document.getElementById("ico"+list[k]).style.height=list2[k]+"px";
		}
	}

	function paoend()
	{
		for (var z=1;z<=icos;z++)
		{
			document.getElementById("ico"+z).style.width="70px";
			document.getElementById("ico"+z).style.height="70px";
		}
	}

	function jump(x)
	{
		app("safari");
		setTimeout(function(){
			document.getElementById("ico"+x).style.transform="translate(0px,-10px)";
			setTimeout(function(){
				document.getElementById("ico"+x).style.transform="translate(0px,0px)";
				setTimeout(function(){
					document.getElementById("ico"+x).style.transform="translate(0px,-10px)";
					setTimeout(function(){
						document.getElementById("ico"+x).style.transform="translate(0px,0px)";
					},300)
				},300)
			},300)
		},100)
	}

	function app(id)
	{
		$("#"+id).fadeToggle("fast");
	}

	var last_x=0;
	var last_y=0;
	var last_w=0;
	var last_h=0;
	var m_state=0;
	function max(id)
	{
		document.getElementById(id).style.transition="all 0.2s";
		setTimeout(function(){document.getElementById(id).style.transition="all 0s";},300);
		if (m_state==0)
		{
			last_h=document.getElementById(id).style.height;
			last_w=document.getElementById(id).style.width;
			last_x=document.getElementById(id).style.left;
			last_y=document.getElementById(id).style.top;
			document.getElementById(id).style.width=document.getElementById("main").style.width;
			document.getElementById(id).style.height=document.getElementById("main").style.height;
			document.getElementById(id).style.left="0px";		
			document.getElementById(id).style.top="26px";
			document.getElementById("www").style.height="922px";
			m_state=1;
		}
		else
		{
			document.getElementById(id).style.width=last_w;
			document.getElementById(id).style.height=last_h;
			document.getElementById(id).style.left=last_x;		
			document.getElementById(id).style.top=last_y;
			m_state=0;
		}
	}
</script>
</head>
<body onmousemove="drag_end(event)" onmouseup="drag_per=0">
	<div class="topbar">
		<img src="img/apple_mini.png" class="bar_icon" style="width:18px;left:15px">
		<div id="time" class="bar_icon" style="right:10%;transform:translate(-15px,0px);">00:00</div>
	</div>
	<div class="main" id="main" style="width:1920px;height:972px">
		<div class="frame" style="height:650px;width:1280px;left:320px;top:126px;display:none;" id="safari" onmousedown ="drag_begin(event)" onmousemove="drag_end(event)" onmouseup="drag_per=0">
			<div class="window">
				<div class="buttom" style="left:10px;background-color:#ff3946;" onclick="app('safari')"></div>
				<div class="buttom" style="left:33px;background-color:#efce05;" onclick="app('safari')"></div>
				<div class="buttom" style="left:56px;background-color:#04e23f;" onclick="max('safari')"></div>
				<input type="text" value="www.baidu.com" name="url" class="url" id="url" onchange="document.getElementById('www').src='http://'+this.value" onclick="setTimeout(function(){drag_per=0},10)" onfocus="setTimeout(function(){drag_per=0},10);this.select()" spellcheck="false">
				<div style="position:absolute;top:12px;left:50%;transform:translate(280px,0px);cursor:pointer;">↻</div>
			</div>
			<iframe src="http://www.baidu.com" target="_top" frameborder=0 class="body" id="www"></iframe>
		</div>
	</div>
	<div class="dock_box">
		<div style="position:absolute;width:100%;height:100%;left:0px;top:0px;overflow:hidden;border-radius:10px;">
			<div class="dock_blur"></div>
			<div class="dock_brit"></div>
		</div>
		<img src="img/safari.png" id="ico1" class="icon" onmouseover="paopao(1)" onmouseout="paoend()" onclick="jump(1)">
		<img src="img/setting.png" id="ico2" class="icon" onmouseover="paopao(2)" onmouseout="paoend()" onclick="jump(2)">
		<img src="img/appstore.png" id="ico3" class="icon" onmouseover="paopao(3)" onmouseout="paoend()" onclick="jump(3)">
		<img src="img/launchpad.png" id="ico4" class="icon" onmouseover="paopao(4)" onmouseout="paoend()" onclick="jump(4)">
		<img src="img/facetime.png" id="ico5" class="icon" onmouseover="paopao(5)" onmouseout="paoend()" onclick="jump(5)">
		<img src="img/calendar.png" id="ico6" class="icon" onmouseover="paopao(6)" onmouseout="paoend()" onclick="jump(6)">
		<img src="img/wechat.png" id="ico7" class="icon" onmouseover="paopao(7)" onmouseout="paoend()" onclick="jump(7)">
	</div>
	<div class="load" id="load">
		<img src="img/apple.png" style="width:10%;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);">
		<div style="width:250px;height:5px;border-radius:3px;border:solid 1px #fff;position:absolute;left:50%;top:40%;transform:translate(-50%,200px);overflow:hidden;">
			<div style="width:100%;height:100%;background-color:#fff;position:absolute;left:-250px;top:0px;transition:all 5s" id="loads"></div>
		</div>
	</div>
	<div class="login" id="login">
		<img src="img/background.jpg" style="position:absolute;width:150%;height:150%;left:-25%;top:-25%;filter:blur(100px) brightness(0.9)">
		<img src="img/user.png" style="position:absolute;left:50%;top:30%;transform:translate(-50%,0px);border-radius:50%;width:100px;height:100px">
		<div style="position:absolute;left:50%;top:30%;transform:translate(-50%,120px);border-radius:50%;width:100px;height:30px;line-height:30px;text-align:center;font-size:15px;color:#fff;font-family:等线,微软雅黑;opacity:0.7">Yooo</div>
		<input style="position:absolute;left:50%;top:30%;transform:translate(-50%,200px);border-radius:5px;width:220px;height:35px;outline:none;border:none;background-color:rgba(255,255,255,0.3);color:#fff;padding:10px;" type="password" onchange="document.getElementById('login').style.opacity='0';setTimeout(function(){document.getElementById('login').style.display='none'},700)">
	</div>
</body>
</html>